<template>
	<div>
    <!--基本信息-->
		<el-card shadow="never">
			<div style="display: inline-flex;width: 100%;">
        <div class="edu-page-title" style="font-size: 20px; margin-bottom: 32px;">{{$t('common.text.baseInfo')}}</div>
        <el-button style="margin-inline-start: auto;" @click="back">{{$t('common.btn.back')}}</el-button>
			</div>
      <el-form :model="content" label-position="left" ref="baseForm" label-suffix="：">
        <!-- <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item :label="$t('courses.applicationNo')">
              <span>{{this.rollInfo.no}}</span>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row :gutter="24">
          <el-col :span="5">
            <el-form-item :label="$t('courseSummary.applicant')">
              <span>{{this.dataInfo.name}}（{{this.dataInfo.id}}）</span>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item :label="$t('courses.code')">
              <span>{{this.dataInfo.code}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('dic.faculty')">
              <span>{{this.dataInfo.facultyI18n}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('teachers.title')">
              <span>{{this.dataInfo.title}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('message.applyDate')">
              <span>{{ this.dataInfo.applyTime | formatDate }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
		</el-card>

    <el-card shadow="never">
      <div style="display: inline-flex;width: 100%;">
        <div class="edu-page-title" style="font-size: 20px; margin-bottom: 32px;">{{$t('application_detail')}}</div>
      </div>
      <el-form :model="approvalInfo" style="margin-top:13px;" label-suffix="：" label-position="left" label-width="310px"
        ref="approveForm" :rules="approveFormRules">

        <!--附件-->
        <el-row :gutter="24" v-if="this.attachments.length > 0">
          <el-col :span="20">
            <el-form-item :label="$t('teachers.attachment')" label-width="85px">
              <div v-for="item in this.attachments" :key="item">
                <el-button :key="item" type="text" @click="handleGetFile(item)">{{ item }}</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 已完成试讲 -->
        <el-row :gutter="24">
          <el-col :span="20">
            <el-form-item :label="$t('teachers.agreeMessage')" prop="result">
              <el-radio-group v-model="approvalInfo.result" :disabled="detailFlag">
                <el-radio label="1" >{{$t('message.yes')}}</el-radio>
                <el-radio label="0" >{{$t('message.no')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <!--附件上传-->
        <el-row :gutter="24" v-if="!detailFlag">
          <el-col :span="20">
            <el-form-item :label="$t('attachment_upload')" label-width="85px" prop="uploadFile">
              <div class="display-inline-block">
                <el-upload ref="approveUpload" :headers="{'X-Token': $store.state.session.sessionid}"
                  :data="{bucketname: 'face', folderpath: 'file'}" 
                  :on-remove="handleAvatarRemove" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                  :file-list="fileList"
                  :on-exceed="handleExceed"
                  :limit="3"
                  class="upload-demo" action="/api/commonservice/obsfile/uploadfile" multiple>
                  <el-button size="small" type="primary">{{$t('courses.clickUpload')}}</el-button>
                  <span class="el-upload__tip">
                    <i style="font-size:16px;color: rgba(26, 104, 223, 0.207843);" class="el-icon-warning"></i>
                    {{$t('attachment_upload_tip')}}
                  </span>
                </el-upload>
              </div>
              <div>
                <span style="font-size:16px;color:red">{{$t('teachers.uploadApplyTeacherForm')}}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="float-right" style="margin:12px 0" v-if="!detailFlag">
        <el-button type="primary" @click="handleConfirm">{{$t('teachers.auditConfirmed')}}</el-button>
      </div>
    </el-card>

    <!-- <el-card shadow="never" style="margin-top:12px">
      <div class="edu-page-title">{{$t('classroomTitle.approvalProgress')}}</div>
      <edu-table :data="this.rollInfo.listApproveHistory" :selection="false" :pagination="false">
        <edu-table-column :label="$t('score.time')">
          <template slot-scope="scope">{{ getFormatTime(scope.row.time)}}</template>
        </edu-table-column>
        <edu-table-column :label="$t('score.appPerson')">
          <template slot-scope="scope">{{ scope.row.approvorName}}({{scope.row.approvorId}})</template>
        </edu-table-column>
        <edu-table-column :label="$t('message.department')">
          <template slot-scope="scope">{{ scope.row.faculty}}</template>
        </edu-table-column>
        <edu-table-column :label="$t('message.operating')">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.result === 'COMMIT'" type="success" size="mini">{{$t('message.submit')}}</el-tag>
            <el-tag v-else-if="scope.row.result === 'End'" type="success" size="mini">{{$t('message.pass')}}</el-tag>
            <el-tag v-else type="danger" size="mini">{{$t('message.reject')}}</el-tag>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('score.description')" show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.content}}</span>
          </template>
        </edu-table-column>
      </edu-table>
    </el-card> -->
	</div>
</template>
<script>
import filters from "common/src/filters";
import {selectApproFlow, approvalThrough, approvalReject} from "common/src/api/approval";
import { downloadfile } from "common/src/api/upload";//附件下载
import { editApprovalStatus ,auditConfirm} from "common/src/api/resource/pgTeacher";
import mixin from 'common/src/mixins/index';

export default {
	name: "TeachingApproveComponent",
  mixins: [mixin],
  props: {
    dataInfo:{
      default: null
    },
    detailFlag:{
      required:true,
      default:false
    }
  },
  filters: {
      formatDate(date) {
          return moment(date).format('YYYY/MM/DD');
      }
  },
	data() {
		return {
			rollInfo: [],
      attachments:[],//审核后附件
      content: "",
			approvalInfo: {
        teacherId:"",//教师id
        teacherCode:"",//教师code
        result: "",
        applyType: "", 
        approveAttachment: [],//附件
        filePath: ""
			},
      approveFormRules: {
          result: [
              {
                  required: true,
                  message: this.$t("teachers.isAgree"),
                  trigger: "change"
              }
          ],
          uploadFile: [
              {
                  required: true,
                  validator: this.checkUpload,
                  trigger: "change"
              }
          ],
      },
      fileList: []
		};
	},
  mounted() {
      this.getOptions();
  },
	methods: {
    //时间格式化
    getFormatTime(val) {
        return moment(val).format("YYYY/MM/DD HH:mm:ss");
    },
    beforeAvatarUpload(file) {
        this.flag = file.size / 1024 / 1024 < 3;
        if(!this.flag){
            this.$message({
                type: "warning",
                message: this.$t('attachment_upload_tip')
            });
        }
        return this.flag;
    },
		handleAvatarRemove(file, fileList) {
			if(file.status!=='success')return;
			const removeFile = file.response.data[file.name].objectkey;
			_.remove(this.approvalInfo.approveAttachment, function(item) {
				return item === removeFile;
      });
      this.fileList = fileList;
		},
		handleAvatarSuccess(response, file, fileList) {
			if (response && response.data) {
				this.approvalInfo.approveAttachment.push(
					response.data[file.name].objectkey
        );

        this.fileList = fileList;
        this.$refs.approveForm.validateField(['uploadFile']);
			}
		},
		handleGetFile(objectKey) {
			if (!objectKey) return;

			downloadfile(objectKey);
		},

		getOptions() {
      if(this.dataInfo.approvalStatus === '0'){
        this.approvalInfo.result = '0'
      }
      if(this.dataInfo.approvalStatus === '4'){
        this.approvalInfo.result = '1'
      }
      if(this.dataInfo.filePath){
        this.attachments = this.dataInfo.filePath.split(';')
        console.log(this.attachments)
      }
      let user = this.global.currentUser;
      let currentManageDptId = user.currentManageDptId ? user.currentManageDptId:user.manageDptIds[0];
      this.approvalInfo.applyType = currentManageDptId
      this.approvalInfo.teacherId = this.dataInfo.id
      this.approvalInfo.teacherCode =this.dataInfo.code
		},
		back() {
			this.$emit("back", "main");
    },
    handleConfirm(){
      this.$refs.approveForm.validate(valid => {
        if (valid) {
          let path = this.approvalInfo.approveAttachment.join(';')
          this.approvalInfo.filePath = path
          auditConfirm(this.approvalInfo).then(res => {
            if (res && res.code === 200) {
              this.back();
            }
          })
        }
      });
    },
    checkUpload(rule, value, callback) {
      if (this.fileList.length === 0) {
        return callback('请上传文件！');
      }
      return callback();
    },
    handleExceed(files, fileList) {
      // 文件超出个数限制时的钩子
      this.$message({
        type: "warning",
        message: this.$t('最大限制上传三个文件')
      })
    },
	}
};
</script>
<style lang="scss" scoped>

</style>
